

body{
	background:#f5f5f5;
}
/*版心*/
.jd_container{
	min-width: 320px;
	max-width: 640px;
	width:100%;
	margin:0 auto;
	
}

/*顶部搜索*/
.jd_search{
	width:100%;
	height:40px;
	position:fixed;
	left:0;
	top:0;
	z-index:1000;
}
/*内容居中*/
.jd_search .jd_search_box{
	height:40px;
	background: rgba(201,21,35,0);
	min-width: 320px;
	max-width: 640px;
	width:100%;
	margin:0 auto;
}

.jd_search .jd_search_box .icon_logo{
	position:absolute;
	left:10px;
	top:4px;
	width:60px;
	height:36px;	
	/*background:url(../images/sprites.png) no-repeat 0px -103px / 200px 200px;*/
	background-position:0 -103px;
}

.jd_search .jd_search_box .login{
	position:absolute;
	right:0;
	top:0;
	width:50px;
	height:40px;
	line-height:40px;
	text-align:center;
	color:#fff;
}

.jd_search .jd_search_box form{
	width:100%;
	padding-left:70px;
	padding-right:50px;	
	position:relative;
}

.jd_search .jd_search_box form .icon_search{
	width:20px;
	height:20px;
	position:absolute;
	left:80px;
	top:10px;
	/*background:url(../images/sprites.png) no-repeat -60px -109px / 200px 200px;*/
	background-position:-60px -109px;
}
/*百分比的计算：基于父容器的内容的宽度*/
.jd_search .jd_search_box form input{
	width:100%;
	height:30px;
	margin-top:5px;
	background:#fff;
	border-radius:15px;
	padding-left:40px;
}
/*
使用精灵图的公用样式
class^='icon_':表示class属性是以icon_开头的
class*='icon_':表示class属性包含icon_这个名称的，并且与前面的属性名以空格分开（以区分a_icon这种情况）
*/
[class^='icon_'],[class*=' icon_']{
	background-repeat:no-repeat;
	background-image:url(../images/sprites.png);
	background-size:200px 200px;
}

/*轮播图*/
.jd_banner{
	width:100%;
	overflow:hidden;
	position:relative;
}

.jd_banner ul:first-child{
	width:1000%;/*这边要放入十张图片*/
	transform:translateX(-10%);
	-webkit-transform:translateX(-10%);
}

.jd_banner ul:first-child li{
	width:10%;
	float:left;
}

.jd_banner ul:first-child li a{
	display:block;
	width:100%;
}

.jd_banner ul:first-child li a img{
	display:block;/*去掉图片下间隙
	三种方法：
	1. body{font-size:0px;} 在对应的属性里面设置不要使用body
	2.img{display:block;}
	3.img(vertical-align:middle;)
	*/
	width:100%;
}

.jd_banner ul:last-child{
	position:absolute; 
	width:118px;
	height:6px;
	left:50%;
	margin-left:-59px;
	bottom:6px;
}

.jd_banner ul:last-child li{
	width:6px;
	height:6px;
	border-radius:3px;
	border:1px solid #fff;
	margin-left:10px;
	float:left;
}

.jd_banner ul:last-child li:first-child{
	margin-left:0;
}

.jd_banner ul:last-child li.now{
	background:#fff
}

/*导航栏*/
.jd_nav{
	width:100%;
	background:#fff;
	border-bottom:1px solid #ccc;
}

.jd_nav ul{
	width:100%;
	padding-top:10px;
	padding-bottom:10px;
}

.jd_nav ul li{
	width:25%;
	float:left;
}

.jd_nav ul li a{
	display:block;
	width:100%;
}

.jd_nav ul li a img{
	display:block;
	width:40px;
	height:40px;
	margin:0 auto;
}

.jd_nav ul li a p{
	text-align:center;
	font-size:12px;
	color:#666;
	padding:5px 0;
}

/*产品区块*/
.jd_product{
	padding:0 5px;
}
/*产品盒子*/
.jd_product_box{
	margin-top:10px;
	box-shadow:0 0 2px #ccc;
	min-height:200px;
	background:#fff;
}

.jd_product_box .tit{
	height:34px;
	line-height:34px;
	border-bottom:1px solid #ddd;
}

.jd_product_box .tit .nb{
	border-bottom:none;
}

.jd_product_box .tit h3{
	font-weight:normal;
	position:relative;
	padding-left:23px;
}

.jd_product_box .tit h3::before{  /*这边是一个竖着的红线*/
	content:"";  /*伪元素写content，伪元素就会默认为行内元素*/
	width:3px;
	height:12px;
	background:#d8505c;
	position:absolute;
	left:10px;
	top:11px;
}

/*秒杀*/
.sk .icon{
	width:16px;
	height:20px;
	float:left;
	margin-left:10px;
	margin-top:7px;
	background:url(../images/seckill-icon.png) no-repeat center / 16px 20px;
}

.sk .name{
	float:left;
	margin-left:10px;
	font-size:16px;
	color:#d8505c;
}

.sk .time{
	float:left;
	margin-left:10px;
}

.sk .time span{
	float:left;
	width:16px;
	height:16px;
	line-height:16px;
	text-align:center;
	color:#fff;
	background:#333;
	margin-left:3px;
	margin-top:9px;
}
	
.sk .time span:nth-child(3n){
	background:#fff;
	width:3px;
	color:#333;
}

.sk .pro{
	width:100%;
	padding:10px 0;
}

.sk .pro li{
	width:33.3333%;
	float:left;
}

.sk .pro li a{
	display:block;
	border-right: 1px solid #ddd;
}

.sk .pro li:last-child a{
	border:none;
}

.sk .pro li a img{
	display:block;
	margin:0 auto;
	width:64%;
}

.sk .pro li p{
	text-align:center;
	font-size:12px;
	padding:5px 0;
}

.sk .pro li .nowPrice{
	color:#d8505c;
}

.sk .pro li .oldPrice{
	color:#666;
	text-decoration:line-through;
}

/*组合样式的使用*/
.w_50p{
	width:50%;
	/*display:block;*/
}

.w_50p img{
	display:block;
	width:100%;
}

.bl{
	border-left:1px solid #ddd;
}
	
.br{
	border-right:1px solid #ddd;
}

.bb{
	border-bottom:1px solid #ddd;
}














